<template>
  <div class="certificationCenter">
    <fx-header @back="loginOut">
      <template #title>
        {{ $t('certificationCenter') }}
      </template>
    </fx-header>
    <div class="box">
      <div class="justify-between1 flex user-info">
        <div>{{ $t('personalCenter') }}</div>
        <div v-if="nationality" class="iti-flag" :class="nationality" style="transform: scale(2.1)"></div>
      </div>
      <div class="flex">
        <div class="gn flex">
          <img src="../../assets/image/idImg/cftIcon.png" alt="" class="w-64 h-64">
          <span class="gn-span" @click="showClick">{{ $t('viewCurrentFeatures') }}</span>
        </div>
      </div>
    </div>
    <div class="contentBox pt-5 tabBackground pb-5">
      <div class="btnBox2">
        <div class="textColor4 textColor5 flex" style="justify-content: center;align-items: center;"
          :class="{ 'activeStyle': active == 0 }" @click="changeTab(0)">
          <img v-if="identityverif" src="../../assets/image/idImg/finishIcon.png" alt="" class="w-10 h-10 mr-2" />
          <img v-else src="../../assets/image/idImg/finishIcon1.png" alt="" class="w-10 h-10 mr-2" />
          <span>{{ $t('primaryCertification') }}</span>
        </div>
        <div class="textColor4 flex" style="justify-content: center;align-items: center;"
          :class="{ 'activeStyle': active == 1 }" @click="changeTab(1)">
          <img v-if="identityverif" src="../../assets/image/idImg/finishIcon.png" alt="" class="w-10 h-10 mr-2" />
          <img v-else src="../../assets/image/idImg/finishIcon1.png" alt="" class="w-10 h-10 mr-2" />
          <span>{{ $t('advancedCertification') }}</span>
        </div>
      </div>
      <div v-show="active == 0">
        <div class="justify-between23">
          <div class="textColor1">{{ $t('require') }}</div>
          <div class="border-radius-left textColor2 yaoqu flex"
            :class="{ 'status0': kyc_status == 0 || kyc_status == 3, 'status1': kyc_status == 1, 'status2': kyc_status == 2 }">
            <img :src="handImg(`status${kyc_status}`)" alt="" />
            <span class="textColor-span font-28 flex items-center">{{
              fixState(kyc_status)
            }}</span>
          </div>
        </div>
        <div class="px-32-1">
          <div class="flex items-center textColor span2">
            <img src="../../assets/image/idImg/info.png" alt="" />
            <span class="textColor textColor666">{{ $t('information') }}</span>
          </div>
          <div class="flex items-center textColor span2">
            <img src="../../assets/image/idImg/identity.png" alt="" />
            <span class="textColor textColor666">{{ $t('governmentIssuedID') }}</span>
          </div>
        </div>
        <div class="px-32-1 px-32-2">
          <div class="font-36 textColor mt-82 span32">{{ $t('featuresAndLimitations') }}</div>
          <content-com class="mt-40" :contentObj="coinObj" :state="identityverif"></content-com>
          <content-com class="mt-40" :contentObj="c2cObj" :state="identityverif"></content-com>
          <content-com class="mt-40" :contentObj="currencyObj" :state="identityverif"></content-com>
          <div class="flex text-grey font-30 mt-64">
            <img src="../../assets/image/idImg/suditIcon.png" alt="" />
            <span class="ml-24">{{ $t('reviewTime') }}:{{ $t('thereDays') }}</span>
          </div>
          <div class=" text-red font-20">
            <p v-show="(kyc_status == 3)">{{ $t('certificationRefusal') }}:{{ turnDownMsg }}</p>
          </div>
          <div class="rounded-lg py-26 text-center btn"
            :class="kyc_status == 0 || kyc_status == 3 ? 'btnMain text-white' : 'bgDark text-grey'" @click="openUlr(1)">{{
              fixBtnState(kyc_status) }}</div>
        </div>

      </div>
      <div v-show="active == 1">
        <div class="justify-between23">
          <div class="textColor1">{{ $t('require') }}</div>
          <div class="border-radius-left textColor2 flex yaoqu"
            :class="{ 'status0': advStatus == 0 || advStatus == 3, 'status1': advStatus == 1, 'status2': advStatus == 2 }">
            <img :src="handImg(`status${advStatus}`)" alt="" />
            <span class="textColor-span font-28 flex items-center">{{ fixState(advStatus) }}</span>
          </div>
        </div>
        <div class="px-32-1">
          <div class="flex items-center textColor span2">
            <img src="../../assets/image/idImg/address.png" alt="" />
            <span class="textColor textColor666">{{ $t('familyAddress') }}</span>
          </div>
          <div class="flex items-center textColor span2">
            <img src="../../assets/image/idImg/address.png" alt="" />
            <span class="textColor textColor666">{{ $t('workAddress') }}</span>
          </div>
          <div class="flex items-center textColor span2">
            <img src="../../assets/image/idImg/connect.png" alt="" />
            <span class=" textColor textColor666">{{ $t('contactRelatives') }}</span>
          </div>
        </div>
        <div class="px-32-1 px-32-2">
          <div class="font-36 textColor mt-82">{{ $t('featuresAndLimitations') }}</div>
          <content-com class="mt-40" :contentObj="advCoinObj" :state="advancedverif"></content-com>
          <content-com class="mt-40" :contentObj="advC2cObj" :state="advancedverif"></content-com>
          <content-com class="mt-40" :contentObj="advCurrencyObj" :state="advancedverif"></content-com>
          <div class="flex  text-grey font-30 mt-64">
            <img class="img3" src="../../assets/image/idImg/suditIcon.png" alt="" />
            <span class="ml-24 fs">{{ $t('notaryTime') }}</span>
          </div>
          <div class="btnMain btnMain1 rounded-lg py-26 text-center mt-16"
            :class="advStatus == 0 || advStatus == 3 ? 'btnMain text-black' : 'bgDark'" @click="openUlr(2)">
            {{ fixBtnState(advStatus) }}
          </div>

        </div>
      </div>
    </div>
    <van-popup round v-model:show="show" position="bottom" :close-on-click-overlay="false" @close="onClose">
      <div class="pop-box relative mainBackground">
        <img :src="handImg('icon-close')" class=" absolute h-10 w-10  top-46" @click="onClose" />
        <div class="pt-46 textColor font-40 textColor9">{{ $t('hasTheFunction') }}</div>
        <div class=" border-b-color" v-for="(item, index) in currentList" :key="index">
          <div class="font-32 text-grey flex items-center">
            <img :src="handImg(item.icon)" class="tk-img" alt="" />
            <span class="textColor mr-10">{{ item.title }}</span>
            <span>{{ item.des }}</span>
          </div>
          <div class="text-grey text-grey1 font-30 " v-for="(str, index) in item.arr" :class="{ 'colorMain': index == 1 }"
            :key="index">{{ str }}</div>
        </div>
        <div class="btnMain btnMain1 text-white font-34 py-26 rounded-lg text-center mt-68" @click="onClose">{{
          $t('confirm')
        }}</div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { _getIdentify, _info } from "@/service/user.api.js";
import { reactive, onMounted, ref } from 'vue';
import contentCom from "./contentCom.vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const turnDownMsg = ref('')
const show = ref(false)
const active = ref(0)
const kyc_status = ref(0)
const advStatus = ref(0)
const identityverif = ref(false)
const advancedverif = ref(false)
const nationality = ref('')
const coinObj = ref({
  title: t('fiatCurrencyLimit'),
  list: [
    {
      left: t('recharge'),
      right: t('unlimited')
    },
    {
      left: t('withdraw'),
      right: t('unlimited')
    }
  ]
})
const c2cObj = ref({
  title: t('c2cTradeLimit'),
  list: [
    {
      left: 'C2C',
      right: t('unlimited')
    },
  ]
})
const currencyObj = ref({
  title: t('cryptoCurrencyLimit'),
  list: [
    {
      left: t('recharge'),
      right: t('unlimited')
    },
    {
      left: t('withdraw'),
      right: t('unlimited')
    }
  ]
})
const advCoinObj = ref({
  title: t('fiatCurrencyLimit'),
  list: [
    {
      left: t('recharge'),
      right: t('unlimited')
    },
    {
      left: t('withdraw'),
      right: t('unlimited')
    }
  ]
})
const advC2cObj = ref({
  title: t('c2cTradeLimit'),
  list: [
    {
      left: 'C2C',
      right: t('unlimited')
    },
  ]
})

const advCurrencyObj = ref({
  title: t('cryptoCurrencyLimit'),
  list: [
    {
      left: t('recharge'),
      right: t('unlimited')
    },
    {
      left: t('withdraw'),
      right: t('unlimited')
    }
  ]
})

const currentList = ref([])
const ownList = ref([
  {
    icon: '1',
    title: t('unlimited'),
    des: t('daily'),
    arr: [t('fiatDepositAndWithdrawalLimit')]
  },
  {
    icon: '2',
    title: t('unlimited'),
    des: '',
    arr: [t('digitalCurrencyRecharge'), t('increaseTheLimit')]
  },
  {
    icon: '3',
    title: t('unlimited'),
    des: t('daily'),
    arr: [t('digitalCurrencyWithdrawalLimit')]
  },
  {
    icon: '4',
    title: t('unlimited'),
    des: '',
    arr: [t('c2cTradeLimit')]
  },
  {
    icon: '5',
    title: 'OTC',
    des: '',
    arr: [t('otherFunctions')]
  }
])
const advOwnList = ref([
  {
    icon: '1',
    title: t('unlimited'),
    des: t('daily'),
    arr: [t('fiatDepositAndWithdrawalLimit')]
  },
  {
    icon: '2',
    title: t('unlimited'),
    des: '',
    arr: [t('digitalCurrencyRecharge'), t('increaseTheLimit')]
  },
  {
    icon: '3',
    title: t('unlimited'),
    des: t('daily'),
    arr: [t('digitalCurrencyWithdrawalLimit')]
  },
  {
    icon: '4',
    title: t('unlimited'),
    des: '',
    arr: [t('c2cTradeLimit')]
  },
  {
    icon: '5',
    title: 'OTC',
    des: '',
    arr: [t('otherFunctions')]
  }
])
onMounted(() => {
  currentList.value = ownList.value
  getLocaluserAction();
  getIdentify();
})
const handImg = (url) => {
  return new URL(`../../assets/image/idImg/${url}.png`, import.meta.url).href
}
const loginOut = () => {
  router.push('/my/index')
}
const changeTab = (index) => {
  active.value = index
  if (index == 0) {
    currentList.value = ownList.value
  } else {
    currentList.value = advOwnList.value
  }
  console.log(currentList);
  console.log(currentList.value);
}
const showClick = () => {
  show.value = true
  console.log(show.value);
}

const onClose = () => {
  show.value = false
}
const getLocaluserAction = () => {
  _info().then(res => {
    identityverif.value = res.identityverif
    advancedverif.value = res.advancedverif
    nationality.value = res.nationality
    kyc_status.value = res.kyc_status || 0
    advStatus.value = res.kyc_high_level_status || 0
    console.log(advStatus.value);
  })
}
const getIdentify = () => {
  _getIdentify().then(data => {
    turnDownMsg.value = data.msg;
  })
}
const fixState = (kyc_status) => {
  let str = ''
  if (kyc_status == 0) {
    str = t('notCertified')
  } else if (kyc_status == 1) {
    str = t('reviewing')
  } else if (kyc_status == 2) {
    str = t('verified')
  } else {
    str = t('notCertified')
  }
  return str;
}
const fixBtnState = (kyc_status) => {
  let str = ''
  if (kyc_status == 0) {
    str = t('authentication')
  } else if (kyc_status == 1) {
    str = t('auditDetails')
  } else if (kyc_status == 2) {
    str = t('certificationDetails')
  } else {
    str = t('authentication')
  }
  return str;
}
const openUlr = (index) => {
  if (index == 1) {
    router.push('/authentication')
  } else {
    router.push('/advancedCtf')
  }
}
</script>
<style lang="scss" scoped>
@import "@/views/authentication/components/intl.css";

.certificationCenter {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.btnMain {
  height: 45px !important;
  line-height: 45px !important;
  font-size: 14px;
}

.box {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2.625rem;
  background: $tab_background;

  .user-info {
    overflow: hidden;
    padding: 30px 10px 10px;
    font-size: 16px;
  }

}

.justify-between1 {
  height: 2rem;
  line-height: 2rem;
  font-size: 1.5rem;
  padding-top: 1rem;
}

.gn {
  background: #565b69;
  border-radius: 3rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  height: 50px;
  line-height: 50px;
}

.btnBox2 {
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
}

.textColor4 {
  margin-top: 2rem;
  // background: $light-grey;
  color: $text_color;
  padding: 2px 20px;
  text-align: center;
  height: 40px;
  padding: 10px;
  border-radius: 2.5rem;
  box-sizing: border-box;
  line-height: normal;
}

.textColor5 {
  margin-right: 2rem;
}

.justify-between23 {
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 2rem;
  display: flex;
}

.textColor1 {
  height: 3rem;
  line-height: 3rem;
}

.textColor2 {
  position: absolute;
  right: 0;
  // width: 27%;
}

.textColor666 {
  margin-left: 1rem;
}

.px-32-1 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.contentBox {}

.btnMain {
  background: $btn_main !important;
  border-radius: 0.5rem;
  line-height: 3.4rem;
  height: 3.4rem;
  margin-top: 2rem;
  color: $text_color;
}

.gn img {
  width: 20px;
  height: 20px;
}

.textColor-span {
  margin-left: 0;
}

.span2 {
  font-size: 14px;
  height: 5rem;
  line-height: 2rem;
  margin: 1.5rem 0rem;
}

.span32 {
  padding-right: 2rem;
  margin-top: 2rem;
}

.px-32-2 .textColor img {
  width: 2rem;
  height: 2rem;
}

.btn {
  margin-top: 2rem;
  background: $btn_main;
  border-radius: 0.5rem;
  line-height: 45px;
  height: 45px;
  color: $text_color;
}

.text-red {
  color: $red;
}

.mt-64 {
  margin-top: 2rem;
}

.mt-40-1 {
  height: 2rem;
  line-height: 2rem;
}

.ml-24 {
  margin-left: 5px;
}

.px-32-1 img {
  width: 20px;
  height: 20px;
}

.px-32-2 .mt-40 {
  margin-top: 0;
}


.activeStyle {
  background: $btn_main;
  color: $text_color;
}

.status0 {
  background: $cont_background;
  color: $red;
}

.status1 {
  background: $cont_background;
  color: #DBAE18;
}

.status2 {
  background: #E6F6F0;
  color: #03A66D;
}

.status3 {
  background: $cont_background;
  color: $red;
}

.fs {
  font-size: 14px;
  margin-left: 10px;
  color: $text_color1;;
}

.text-grey .img3 {
  width: 20px;
  height: 20px;
}

.border-radius-left {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

.van-popup.van-popup--bottom {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.yaoqu {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.yaoqu img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-right: 5px;
}

.tk-img {
  width: 20px;
  height: 20px;
}

.mainBackground {
  padding: 1rem 1rem;
}

.text-grey {
  margin-top: 15px;
}

.textColor9 {
  height: 4rem;
  line-height: 4rem;
}

.absolute {
  margin-top: 0.9rem;
  right: 1rem;
}

.text-grey1 {
  margin-left: 3rem;
  font-size: 14px;
  color: $text_color1 !important;

}

.colorMain {
  color: $color_main !important;
}

.mr-10 {
  margin-right: 0.5rem;
  margin-left: 1rem;
}

.user-info {
  justify-content: space-between;
  align-items: center;
}

.border-b-color {
  padding-bottom: 10px;
  border-bottom: 1px solid $border_color;
}
</style>